<%
  hostname = @pg.hostname
  password = URI.encode_uri_component(@pg.superuser_password)

  connection_infos = {
    "url-5432" => "postgresql://postgres:#{password}@#{hostname}:5432/postgres",
    "url-6432" => "postgresql://postgres:#{password}@#{hostname}:6432/postgres",
    "psql-5432" => "psql postgresql://postgres:#{password}@#{hostname}:5432/postgres",
    "psql-6432" => "psql postgresql://postgres:#{password}@#{hostname}:6432/postgres",
    "env-5432" => "PGHOST=#{hostname}\nPGPORT=5432\nPGUSER=postgres\nPGPASSWORD=#{password}\nPGDATABASE=postgres",
    "env-6432" => "PGHOST=#{hostname}\nPGPORT=6432\nPGUSER=postgres\nPGPASSWORD=#{password}\nPGDATABASE=postgres",
    "yaml-5432" => "host: #{hostname}\nport: 5432\nuser: postgres\npassword: #{password}\ndatabase: postgres",
    "yaml-6432" => "host: #{hostname}\nport: 6432\nuser: postgres\npassword: #{password}\ndatabase: postgres",
    "jdbc-5432" => "jdbc:postgresql://#{hostname}:5432/postgres?user=postgres&password=#{password}&ssl=true",
    "jdbc-6432" => "jdbc:postgresql://#{hostname}:6432/postgres?user=postgres&password=#{password}&ssl=true"
  }

%>

<div class="p-6">
  <% if @pg.display_state != "creating" %>
    <div class="flex items-center gap-6 connection-info-format-selector">
      <div class="flex items-center gap-2">
        Format:
        <div>
          <%== part(
            "components/form/select",
            options: connection_infos.keys.map { it.split("-").first }.uniq.map { [it, it] },
            attributes: {
              "data-hostname" => @pg.hostname,
              "data-username" => "postgres",
              "data-password" => @pg.superuser_password,
              "data-database" => "postgres"
            },
          ) %>
        </div>
      </div>
      <div><%== part("components/form/checkbox", options: [["1", "Use pgBouncer?", "", {}]]) %></div>
    </div>

    <%
      connection_infos.each_with_index do |(key, value), index|
      hidden_class = index == 0 ? "" : "hidden"
    %>
      <div class="bg-gray-200 rounded-md p-6 mt-5 connection-info-box connection-info-box-<%= key %> <%= hidden_class %>">
      <%== part("components/copyable_content", content: value, revealable: true, classes: "!flex justify-between") %>
      </div>
    <% end %>

    <div class="mt-5 flex items-center gap-2">
      CA Certificates: <%== part("components/download_button", link: "#{@project_data[:path]}#{@pg.path}/ca-certificates")%>
    </div>
  <% else %>
    <div class="flex flex-col items-center justify-center h-full">
      <h2 class="text-2xl font-semibold text-gray-900">No connection information available</h2>
      <p class="text-gray-500 mt-2">Connection information will be available once the database is running.</p>
    </div>
  <% end %>
</div>


